<template>
	<div style="width: 1200px;margin: 0 auto;">
		<div class="game" @click="create"></div>
		<!-- end -->
		<div style="margin: 0 auto;width: 250px;">
			<el-row :gutter="24" class="partSec center">
				<el-col  :class="{'action':icp == index}" v-for="(item,index) in dataList" :key="index" :span="12">
					<div @click="btncp(index)">{{item}}</div>
				</el-col>
			</el-row>
		</div>
		<!-- end -->
		<div v-if="icp == 0" >
			<div >
				<div class="game_list" v-for="(item,index) in gameList" :key="index">
					<div style="padding: 10px;">
						<div class="dis game_flex" >
							<div>
								<img :src="item.img" />
								<div v-if="item.num != ''" class="game_biao">
										{{item.num}} 题
								</div>
							</div>
							<div style="width: 40%; position: relative;">
								<div style="position: absolute; top: 15px;left: 0;font-size: 18px; color: #666;">{{item.name}}</div>
								<div style="position: absolute;bottom: 15px; color: #666; font-size: 16px;">
									2021-07-08：15：35
								</div>
							</div>
							<div style="width: 38%;height: 127px; position: relative;">
								<div>
									<div class="cengt dis">
										<el-button @click="share(item)" class="btnpd" style="background-color: #efefef;color: #666;box-shadow: 0 3px 0 #dcdee2;">
											<i class="el-icon-share"></i>
											分享
										</el-button>
										<el-button @click="edit(item)" class="btnpd" style="background-color: #efefef;color: #666;box-shadow: 0 3px 0 #dcdee2;">
											<i class="el-icon-edit"></i>
											编辑
										</el-button>
										<el-button  @click="open(item)" class="btnpd" style="background-color: #2eb1ff;width: 120px; color: #FFFFFF;box-shadow: 0 3px 0 #1490ff;">
											<i class="el-icon-caret-right"></i>
											开始游戏
										</el-button>
									</div>
								</div>
								<div class="dis" style="width: 50%;position: absolute;right: 0;bottom: 5px; color: #666666;">
									<div @click="config(index,item)">
										<i class="el-icon-delete"></i>
										删除
									</div>
									<div @click="copy(index,item)">
										<i class="el-icon-document-copy"></i>
										复制
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div v-if="icp == 1">
			<div >
				<div class="game_list" v-for="(item,index) in gameList" :key="index">
					<div style="padding: 10px;">
						<div class="dis game_flex" >
							<div>
								<img :src="item.img" />
								<div v-if="item.num != ''" class="game_biao">
										{{item.num}} 题
								</div>
							</div>
							<div style="width: 62%; position: relative;">
								<div style="position: absolute; top: 15px;left: 0;font-size: 18px; color: #666;">游戏标题</div>
								<div style="position: absolute;bottom: 15px; color: #666; font-size: 16px;">
									{{item.time}}
								</div>
							</div>
							<div style="width: 15%;height: 127px; position: relative; ">
								<div>
									<a type="button" href="./下载文件.docx" download="测试模板"  class="btnDownload" @click="open(item)" >
										下载数据
									</a>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			
		</div>
		<el-dialog 
			:visible.sync="sharShow" 
			width="500px" 
			title="分享"
			:before-close="handClose">
			<div style="padding:20px 40px;">
				<div class="sharez dis">
					<img style="width: 120px;height: 70px;" :src="i.img " />
					<div style="width: 63%; position: relative;">
						<div style="font-size: 16px;">{{i.name}}</div>
						<div style="position: absolute;bottom: 0;font-size: 14px; color: #666666;">{{i.time}}</div>
					</div>
				</div>
				<div style="font-size: 14px;color: #999999;">您可将以下链接分享给朋友，朋友接受后即可使用此游戏</div>
				<div class="dis" style="margin-top: 10px;">
					<el-input disabled  style="margin-right: 10px;" v-model="i.inp"></el-input>
					<el-button type="primary" @click="copyNei(i.inp,$event)">复制</el-button>
				</div>
			</div>
		</el-dialog>
		
	</div>
</template>

<script>
	import clip from '@/utils/clipboard'
	export default {
		data(){
			return {
				icp:0,
				dataList:['我的游戏','数据'],
				gameList:[
					{
						img:'https://pica.zhimg.com/80/v2-7119f65da8ac5f9bf593f25b5c815413_720w.jpg',
						num:1,
						name:'游戏标题',
						time:'2021-07-08：15：35',
						inp:'https://mlearning-tools.pingan.com.cn/learn/cwtools/#!/share/xSXtLyq'
					},
					{
						img:'https://pica.zhimg.com/80/v2-7119f65da8ac5f9bf593f25b5c815413_720w.jpg',
						num:1,
						name:'游戏标题',
						time:'2021-07-08：15：35',
						inp:'https://mlearning-tools.pingan.com.cn/learn/cwtools/#!/share/xSXtLyq'
					},
				],
				//分享弹框
				sharShow:false,
				i:{
					inp:'https://mlearning-tools.pingan.com.cn/learn/cwtools/#!/share/xSXtLyq'
				}
			}
		},
		methods: {
			btncp(e){
				this.icp = e
			},
			//复制内容
			copyNei(text,event){
				clip(text, event)
				console.log('clicp',clip)
			},
			//删除
			config(e,i){
				 this.$confirm('是否删除题目?', '操作提示', {
				  confirmButtonText: '确定',
				  cancelButtonText: '取消',
				  type: 'warning'
				}).then(() => {
				  this.gameList.splice(e)
				  this.$message({
					type: 'success',
					message: '删除成功!'
				  });
				}).catch(() => {
				  this.$message({
					type: 'info',
					message: '已取消删除'
				  });          
				});
				console.log(e,'eeee',i,'iiiiiiii')
			},
			//关闭弹窗
			handClose(){
				this.sharShow = false
			},
			//复制
			copy(e,i){
				this.gameList.push({
					img:i.img,
					name:i.name,
					num:i.num,
					time:i.time
				})
				console.log(this.gameList)
			},
			//创建游戏
			create(){
				this.$router.push({path:'/create'})
			},
			//开始游戏
			open(i){
				console.log('ii',i)
				let routeData = 'http://localhost:8080/#/openCourse?img='+i.img+'&name=' +i.name
				console.log('safds',routeData)
				window.open(routeData, '_blank') 
				// window.open('www.baidu.com','_blank')
			},
			//编辑
			edit(i){
				this.$router.push({
					path:'/edit',
					query:{
						ImgUrl:i.img,
						name:i.name,
						
					}
				})
			},
			//分享
			share(i){
				console.log(i)
				this.sharShow = true
				this.i = i
			},
		}
	}
</script>

<style lang="scss">
	.sharez{
		border: 1px solid #e8e8e8;
		border-radius: 3px;
		padding: 5px;
		margin-bottom: 30px;
		
	}
	
	.btnDownload {
	    height: 40px;
	    width: 100px;
	    display: inline-block;
	    background: url() 0 0/120px 90px no-repeat;
	    text-align: center;
	    line-height: 37px;
	    padding-left: 20px;
	    color: #fff;
	    position: absolute;
	    right: 0px;
	    top: 50px;
	    cursor: pointer;
	}
	.game_biao{
		width: 50px;
		height: 25px;
		color: #FFFFFF;
		border-radius: 5px;
		background-color: #8f8f8f;
		text-align: center;
		position: absolute;
		font-size: 13px;
		line-height: 25px;		
		top: 15px;
		left: 15px;
		opacity: .5;
	}
	.cengt{
		position: absolute;
		top: 31%;
		.btnpd{
			height: 30px;
			// border-radius: 5px;
			height: 40px;
			width: 90px;
			margin-right: 10px;
			
		}
	}
	.cengt .btnpd:last-child{
		margin-right: 0;
	}
	.game_flex{
		flex-wrap: wrap;
		display: flex;
	}
	.game_list{
		position: relative;
		width: 914px;
		margin: 0 auto;
		border: 1px solid #e8e8e8;
		margin-top: 20px;
		height: 147px;
		img{
			width: 166px;
			height: 125px;
		}
	}
	.action{
		background-color: #262626;;
		color: #FFFFFF;
	}
	ul li {
		list-style: none;
	}
	
	.partSec{
		cursor: pointer;
		width: 250px;
		margin: auto;
		display: flex;
		justify-content: space-between;
		border: 2px solid #262626;
		border-radius: 8px;
		height: 36px;
		line-height: 31px;
	}
	 .partSec li:first-child {
	    border-radius: 4px 0 0 4px;
	}
    .partSec li {
	    width: 50%;
		
	    text-align: center;
	    cursor: pointer;
	    height: 36px;
	}
	.game{
		cursor: pointer;
		    height: 76px;
		    width: 88px;
		    margin: 30px auto;
		    background-size: 88px 76px;
		    background-image: url();
	}
</style>
